<template>
  <d2-container>
<!--    <pcic-area-select-input/>-->
    <div class="insure_page">
      <div class="title-sub flex">
        <div>
          <d2-icon-svg style="fill: #556677;" name="more-line"/>
          <span class="sub_title_name">投保单号</span>
          <span class="sub_title_num">(保存后生成)</span>
        </div>
      </div>
      <nav-page>
        <nav-page-item v-for="(value,key,index) in _pageData" :key="key" :title="value.title" icon="el-icon-plus" :status="status[index]">
          <el-collapse v-model="activeNames">
            <el-collapse-item :name="key">
              <template slot="title">
                <div>
                  <div class="titlefirst">
                    <i class="title_bar"></i>
                    <span class="title_name">{{value.title}}</span>
<!--                    <span class="infotips">-->
<!--            <i class="el-icon-warning" style="color: #3396F9"></i>蓝色输入框为必填项，下同。-->
<!--          </span>-->
                  </div>

                </div>

              </template>
              <pcic-form-plus ref="formItemRef" @validate="handleValidate(index, ...arguments)" :crud-options="value.crudOptions"/>


            </el-collapse-item>
          </el-collapse>

          <!--          <base-info ref="basic" @validate="handleValidate('basic', ...arguments)"/>-->
        </nav-page-item>
      </nav-page>
    </div>
    <template slot="footer">
      <div class="submit-btns text-center">
        <el-button @click="handleSubmit" type="primary" size="mini">提交</el-button>
        <el-button type="primary" size="mini">暂存</el-button>
      </div>
    </template>
  </d2-container>
</template>

<script>
import util from '@/libs/util'
import {crudOptions as crud1} from './crud1'
import pageData from './demo.json'

export default {
  data () {
    return {
      defaultFormOptions:{
        size: 'small',
        defaultSpan: 8,
        labelWidth: '150px'
      },
      activeNames:Object.keys(pageData),
      pageData: pageData,
      status: [],
      forms: [
        {
          key: 'baseInfo',
          title: '基本'
        }
      ]
    }
  },
  methods: {
    async handleSubmit () {
      let forms = this.$refs.formItemRef
      if(!(forms instanceof Array)){
        forms = [forms]
      }

      let error = false
      for (const form of forms) {
        let valid = await form.doValidate()
        if (!valid) {
          error = true
        }
      }
      if (error) {
        this.$message.error("校验失败")
        return
      }

      const data = {
        ...this.$refs.basic.getEditForm(),
        ...this.$refs.car.getEditForm(),
        ...this.$refs.customer.getEditForm(),
        ...this.$refs.agreement.getEditForm()
      }
      console.log(data)

      this.$message.success('提交成功')
    },
    handleValidate (form, success) {
      if (success) {
        this.$set(this.status, form,'success' )
      } else {
        this.$set(this.status, form,'error' )
      }
    },
    handleNavClick (item) {
      let $el = this.$refs[item.key].$el
      util.scrollByEl($el)
    }
  },
  computed:{
    _pageData(){
      let result = {}
      for (const key of Object.keys(this.pageData)){
        let item = {...this.pageData[key]}
        let columns = item.columns
        columns.forEach(col=>{
          if(col.type === 'area'){
            col.key = "areaInfo"
          }
          const props = col.props || {}
          const rules = col.rules || []
          col.form = {
            rules: rules,
            value: col.defaultValue,
            component:{
              span: col.span? parseInt(col.span+ ""): undefined,
              props: {
                ...props,
                elProps:{
                  ...props
                }
              }
            }
          }
        })
        let crudOptions = {
          formOptions: this.defaultFormOptions,
          columns
        }
        delete item.columns
        item.crudOptions = crudOptions
        result[key] = item
      }
      return result
    }
  }
}
</script>

<style scoped lang="scss">

</style>

<style lang="scss">

</style>
